<template>
  <div class="el-card__body">
    <avue-crud
      :option="options"
      :data="tableData"
      :page.sync="page"
      :table-loading="loading"
      :before-open="beforeOpen"
      @on-load="getList"
      @row-update="handleUpdate"
      @row-del="handleDel"
      @refresh-change="refreshChange"
    >
      <template slot="img_url" slot-scope="scope">
        <ImagePreview
          :imageUrl="scope.row.avatar"
        />
      </template>
      <template slot="img_urlForm" slot-scope="scope">
        <UploadImg
          :width="60"
          :height="60"
          :imageUrl="
            isEdit
              ? scope.row.avatar : ''
          "
          :isEdit="isEdit"
        />
      </template>
    </avue-crud>
  </div>
</template>
  <script>
import userApi from "@/API/userApi";
import { options } from "@/options/user";
import { error, success, confirm, info } from "@/utils/message";
import { formatDate } from "@/utils/index";
import ImagePreview from "@/components/ImagePreview";
import UploadImg from "@/components/uploadImg";
export default {
  components: { ImagePreview, UploadImg },
  data() {
    return {
      loading: false,
      options: options,
      tableData: [],
      isEdit: true,
      page: {
        pageSize: 10,
      },
    };
  },
  methods: {
    //获取用户列表
    async getList(page) {
      console.log(`page`, page)
      this.loading = true;
      try {
        let paprms = {
          page: page.currentPage,
          limit: page.pageSize,
        };
        let {
          data: { list, total },
        } = await userApi.getUserList(paprms);
        this.tableData = list;
        this.page.total = total;
        setTimeout(() => {
          this.loading = false;
        }, 300);
      } catch (err) {
        this.loading = false;
        error(`${err}`);
      }
    },
    async handleDel({user_id}) {
      try {
        await confirm("此操作将永久删除该用户, 是否继续?", "提示");
        await userApi.logoutUser({ user_id: user_id });
        success("删除成功");
        setTimeout(() => {
          this.refreshChange();
        }, 300);
      } catch (err) {
        info(`${err}`);
      }
    },
    handleUpdate(row, index, done, loading) {
      console.log(row);
      delete row.$index
      userApi.updateUserInfo(row)
      done();
    },
    async refreshChange() {
      this.getList(this.page);
    },
    beforeOpen(done, type, index) {
      if (type == "add") {
        this.isEdit = false;
      } else {
        this.isEdit = true;
      }
      done();
    },
  },
};
</script>
<style scoped>
</style>